var simpleAutoCompleteBox = function(id,data,type,callback,cfg){
	this.id = id;
	this.input = null;
	this.type=type;
	this.data = data;
	this.matchData = null;
	this.domReady=false;
	this.boxIsAvailable = false;
	this.index=-1;
	this.dom={};
	this.callback=callback;
	this.cfg = $.extend({width:120},true,cfg)
	this.textChangeTimeout = null;
	this.HTML="<div class='simpleAutoCompleteBox'><div class='simpleAutoCompleteBoxWrap'><ul></ul></div></div>";
	
};
simpleAutoCompleteBox.prototype={
	init:function(){
		this._generateDom();
		this.input = $("#"+this.id);
		var sf =this;
		this.input.bind("keyup.simpleAutoCompleteBox", function(e){
            if (e.keyCode == 40 || e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 13) {
                return;
            }
            if (sf.textChangeTimeout != null) {
                clearTimeout(sf.textChangeTimeout);
            }
            sf.textChangeTimeout = setTimeout(function(){
                if (!sf.boxIsAvailable) {
                    sf.dom.dom.css({
                        top: sf.input.offset().top + sf.input.outerHeight() + "px",
                        left: sf.input.offset().left
                    });
                }
                if (sf.input.val() == "") {
                    sf.hide();
                    return;
                }
                sf.matchData =sf._matchString(sf.input.val());
				sf._bindUI();
                sf.textChangeTimeout = null;
            }, 100)
        });
		this.dom.dom.bind("click.simpleAutoCompleteBox",function(e){
			var o =$(e.target).closest("li");
			var key = o.attr("index");
			if(sf.callback!=null&&typeof(sf.callback.onclick)=="function"){
				sf.callback.onclick(key);
			}
			sf.hide();
		});
		this.dom.ul.bind("mouseover.simpleAutoCompleteBox",function(e){
			var o =$(e.target).closest("li");
			o.parent().find("li").removeClass("mover");
			o.addClass("mover");
		});
		$(document.body).bind("click.simpleAutoCompleteBox",function(){
			sf.hide();
		})
	},
	setData:function(data){
		this.data = data;
	},
	setType:function(type){
		this.type = type;
	},
	show:function(){
		this.dom.dom.show();
	},
	hide:function(){
		this.dom.dom.hide();
	},
	
	_matchString:function(kw){
		var rgx = new RegExp(kw, "i");
		var tmatch = null;
		var rtn = {};
		if(this.type=="[]"){
			for(var i =0;i<this.data.length;i++){
				tmatch = this.data[i].match(rgx);
				if(tmatch!=null){
					rtn[i]=this.data[i].replace(rgx, "<span class='highlight'>" + tmatch[0] + "</span>");
				}
			}
		}if(this.type.indexOf("key{")!=-1){
			var sw = this.type.replace("key{","").replace("}","");
			for(var k in this.data){
				tmatch = this.data[k][sw].match(rgx);
				if(tmatch!=null){
					rtn[k]=this.data[k][sw].replace(rgx, "<span class='highlight'>" + tmatch[0] + "</span>");
				}
			}
		}
		return rtn;
	},
	_bindUI:function(){
		var str="";
		for(var i in this.matchData){
			if(typeof(this.matchData[i])!="undefined"){
				str +='<li index='+i+'>'+this.matchData[i]+'</li>';
			}
		}
		this.dom.ul.html("");
		this.dom.ul.append(str);
		if(str!=""){
			this.show();
		}
	},
	_generateDom:function(){
		this.dom.dom=$(this.HTML).appendTo(document.body);
		this.dom.dom.css({width:this.cfg.width});
		this.dom.wrap = this.dom.dom.find(".simpleAutoCompleteBoxWrap");
		this.dom.ul = this.dom.wrap.find("ul");
		if(typeof(document.body)!="undefined"&&document.body!=null){
			this.domReady=true;
		}
		this.hide();
	}
};